<template>
  <div>
    <!-- <h1>{{count}}</h1> -->
     <!-- <button @click="changeCount">累加</button> -->
    <button @click="changePerson">修改person</button>
    <h1>{{person.age}}--{{person.name}}--{{person.sex}}</h1>
  </div>
</template>

<script lang="ts">
  import {defineComponent} from "vue"
  export default defineComponent({
    name:'Abort',
  })


</script>
<script setup lang="ts">
import {reactive,toRefs} from "vue"
let person = reactive({
  name:'嘎嘎嘎',
  sex:'male',
  age:18
})
//1.直接解构代理对象，只能得到变量的值，但失去了响应式原理
// let{name,age,sex} = person
//2.使用toRefs解构保留了响应式,但解构得到的是ref对象，每个属性的值都在各自的ref对象的value中
//在setup中使用时需要.value，
let{name,age,sex} = toRefs(person)
console.log(name,age,sex)


const changePerson =()=>{
  console.log('修改person')
  age.value++
}


</script>